<!-- 
    # 编程范式的改变
        1. 传统js开发（命令式编程）
            - 创建div元素，设置id熟悉
            - 定义一个变量交message
            - 将message变量放在前面的div元素中显示
        2. Vue的编程范式（声明式编程）
            - 将标签给Vue管理，通过声明相关变量来绑定数据
    
    # 改变
        - 这是js到Vue的编程模式的改变
        - 将js和html分离，不需要再用js手动生成dom了
 -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>{{message}}</h1>
            <h1>{{name}}</h1>
        </div>
        <div>
            {{message}}
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // let(变量)/const(常量)
            const app = new Vue({
                el: '#app', //用于挂载要管理的元素
                data: { //定义数据
                    message: '你好啊，2020！',
                    name: 'btmood'
                }
            })

        </script>
    </body>
</html>
